<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		js:
		   1.基础语法
		   2.DOM
		   3.BOM
		   DOM:Dcument Object Model。文档对象模型，描述了处理文档的方法，可以对文档进行增，删，改，查
		   BOM：网页加载完成以后，浏览器会创建一个具有层级关系的树状结构，DOM树种存放了很多节点

		   节点：
		   1.元素节点< div >
		   2.文本节点 hello,world
		   3.声明节点< !doctype html >
		   4.注释节点< !---- >
		   5.文档根节点 document

1.兄弟节点（同一个父节点）
		   2.父节点
		   3.子节点
		   4.祖先节点
		   5.后代节点

		   节点之间的关系;
		   1.兄弟节点（同一个父节点）
		   2.父节点
		   3.子节点
		   4.祖先节点
		   5.后代节点

		   <div id="box"></div>
		   <ul>
		   		<li class="a">1</li>
		   		<li class="a">2</li>
		   		<li class="a">3</li>
		   		<li class="a">4</li>
		   		<li class="a">5</li>
		   </ul>

		   <select name="b" id="">
		   	  <option value="apple">苹果</option>
		   	  <option value="orange">橘子</option>
		   </select>
		   <div id="wrap">
		   	  <p>hello</p>
		   	  <div>world</div>
		   	  <!-- nihaoma -->
		   	  <div>I am very good</div>
		   </div>
		   <p id="text">
		   	hello,world!
		   </p>

	</body>
</html>
<script>
	//获取元素的方法
	//通过ID获取唯一元素
	var boxDiv = document.getElementById("box");
	console.dir(boxDiv);

	//通过类名获取元素，返回存放一个或多个。。。
	//var li_arr_a
	var liArr = document.getElementsByClassName('a');
	console.log(liArr);
	console.log(liArr.forEach);
	[].slice.call(liArr).forEach(function(e,i){
		//console.log(e,i);
		//设置行内样式
		e.style.width = i * 50 + 100 + "px";
		e.style.height = '50px';
		e.style.border = '2px solid black';
		//background这样的属性需要写成驼峰命名法
		e.style.backgroundColor = "yellow";
		e.style.color = "blue";

		e.onclick = function(){
			for(var i = 0; i < liArr.length; i++){
				liArr[i].style.background = "yellow";//点击变红不点从新变回黄色
			}
           this.style.background = "red";
		};
	});

	var ulArr = document.getElementsByTagName("ul");
	console.dir(ulArr);

	var ul = ulArr[0];//下标为零的第一个ul
	console.log(ul.getElementsByClassName("a"));//通过类名获取ul下面的所有.a元素
	console.log(ul.getElementsByTagName("li"));//通过标签名获取ul下面的所有li元素

	//通过选择器获取元素
	var liArr2 = document.querySelectorAll("ul>li.a");
	console.dir(liArr2);

	//创建元素
	var li = document.createElement("li");
	//给元素添加类名
	li.className = "a";
	//给元素添加id名
	li.id = "test";

	//拼接元素
	ul.appendChild(li);

    //HTMLCollection集合是动态性集合（会增加元素？）
	console.log(liArr);


	//NodeList集合是静态类型集合
	console.log(liArr2);
    

    //获取满足条件的第一个元素，参数为选择器字符串//返回的是一个元素而不是一个集合
	var li = ul.querySelector("li");
	console.log(li);

	//通过name获取元素
	var eleArr = document.getElementsByName("b");
	console.log(eleArr);
	var select = eleArr[0];
	console.log(select);
	select.value = "orange";

	//节点
	//根节点
	console.dir(document);//window
    
    //声明节点
	console.log(document.doctype);

	//head
	console.log(document.head);

	//body
	console.log(document.body);

	//html
	console.log(document.documentElement);

	//获取wrap元素
	var wrapDiv = document.getElementById("wrap");
	console.log(wrapDiv);

	//获取元素的所有子节点
	//换行和空格都是文本（text）节点
	console.log(wrapDiv.childNodes);

	//获取第一个子节点
		console.log(wrapDiv.firstChild);

		//获取最后一个子节点
		console.log(wrapDiv.lastChild);
        //获取元素第二个子节点
		console.log(wrapDiv.childNodes[1]);
         
         var p = wrapDiv.childNodes[1];
		//获取元素的前一个兄弟节点
		console.log(p.previousSibling)

		//获取元素的下一个兄弟节点
		console.log(p.nextSibling);
		console.log(p.nextSibling.nextSibling.nextSibling);

		//获取元素的所有子元素节点
		console.log(wrapDiv.children);
        //获取第一个子元素节点
		console.log(wrapDiv.firstElementChild);

		//获取最后一个元素节点
		console.log(wrapDiv.lastElementChild);

		//获取下一个兄弟元素节点
		console.log(wrapDiv.firstElementChild.nextSibling);

		//获取上一个兄弟元素节点
		console.log(wrapDiv.lastElementChild.previousElementSibling);

		//获取元素中的所有元素
		var textP = document.getElementById("text");
		console.log(textP.innerHTML);
		console.log(wrapDiv.innerHTML);
        
        //只获取文本内容，空格换行会被过滤，如果样式为visibility：inner获取不到
		console.log(wrapDiv.innerText);
        
        //获取所有文本内容
		console.log(wrapDiv.textContent);

		//获取文本节点
		var textNode = wrapDiv.firstChild;

		//获取注释节点
		var commentNode = wrapDiv.children[1].nextSibling.nextSibling;

		//打印节点的值，根节点的节点值
		console.log(document.nodeValue);
        //注释节点的节点值
		console.log(commentNode.nodeValue);
		//文本节点的节点值
		console.log(textNode.nodeValue);

		//获取声明节点的节点值
		console.log(document.doctype.nodeValue);
        //元素节点的节点值
		console.log(wrapDiv.nodeValue);

		//只有文本节点和注释节点有节点值，其他为null


		//节点类型
		//9
		console.log(document.nodeType);
        //1
		console.log(wrapDiv.nodeType);
		//8
		console.log(commentNode.nodeType);
		//10
		console.log(document.doctype.nodeType);
		//3
		console.log(textNode.nodeType);

		//节点名称
		console.log(document.nodeName);
		console.log(document.doctype.nodeName);
		console.log(wrapDiv.nodeName);
		console.log(commentNode.nodeName);
		console.log(textNode.nodeName);

		//判断是否有字节点
		if(wrapDiv.hasChildNodes()){
			console.log("有子节点");
		}else{
			console.log("没有子节点");
		}


		



</script>